<template>
  <div>
    <el-card style="margin: 2vw;height: 86vh">
      <div class="up-card">
        <div>
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model.trim="projectInput"></el-input>
        </div>
      </div>
      <div class="down-card">
        <el-table :data="projectData.arr" stripe style="width: 100vw;" height="60vh" :key="Math.random()">


          <el-table-column prop="projectName" label="项目名称" />

          <el-table-column prop="category" label="项目状态报告">
            <el-button type="primary">查看</el-button>
            <!-- <el-button type="Info">上传</el-button>
            <el-button type="danger">删除</el-button> -->
          </el-table-column>

          <el-table-column prop="background" label="项目风险">
            <template #default="scope1">

              <el-dialog title="项目风险" :visible.sync="dialogrisk1Visible" center width="50vw">
                <el-table :data="projectData.arr[scope1.$index].risk" stripe style="width: 40vw;margin: auto;"
                  height="66vh" :key="Math.random()">
                  <el-table-column property="riskName" label="风险名称" width="140"></el-table-column>
                  <el-table-column property="state" label="风险状态" width="140"></el-table-column>
                  <el-table-column property="category" label="风险种类" width="120"></el-table-column>
                  <el-table-column property="principal" label="责任人" width="120"></el-table-column>
                  <el-table-column property="priority" label="优先级" width="100"></el-table-column>
                  <!-- <el-table-column label="删除">
                    <template slot-scope="scope2">
                      <el-button @click.native.prevent="deleteRow(scope2.$index, projectData.arr[scope1.$index].risk)"
                        type="danger">删除</el-button>
                    </template>
                  </el-table-column> -->

                </el-table>
              </el-dialog>
              <el-button type="primary" @click=" dialogrisk1Visible = true">查看</el-button>
              <!-- <el-button type="info" @click="dialogrisk2Visible = true">新增</el-button> -->
              <el-dialog title="项目风险" :visible.sync="dialogrisk2Visible" width="40vw">
                <el-form :model="projectRisk" :rules="rules" ref="projectRisk">
                  <el-form-item label="风险名称" label-width='80px' prop="riskName">
                    <el-input v-model="projectRisk.riskName" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                  <el-form-item label="风险状态" label-width='80px' prop="state">
                    <el-input v-model="projectRisk.state" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                  <el-form-item label="风险种类" label-width='80px' prop="category">
                    <el-select v-model="projectRisk.category" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width='80px' prop="principal">
                    <el-input v-model="projectRisk.principal" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                  <el-form-item label="优先级" label-width='80px' prop="priority">
                    <el-input v-model="projectRisk.priority" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogrisk2Visible = false, clear('projectRisk')">取 消</el-button>
                  <el-button type="primary" @click="dialogrisk2Visible = false, pushRisk(scope1.$index), clear()">确
                    定</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>

          <el-table-column prop="background" label="人员管理">
            <template #default="scope3">
              <el-dialog title="人员管理" :visible.sync="dialogmem1Visible" center width="30vw">

                <el-table :data="projectData.arr[scope3.$index].mem" stripe
                  style="width: 20vw;margin: auto;overflow: hidden;" height="40vh" :key="Math.random()">
                  <el-table-column property="memName" label="人员名称" width="140"></el-table-column>
                  <el-table-column label="技能" width="140" type="primary">
                    <template slot-scope="scope6">
                      <el-tag v-for="skill in scope6.row.memSkill" :key="skill">
                        {{ skill }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="删除">
                    <template slot-scope="scope4">
                      <el-button @click.native.prevent="deleteRow(scope4.$index, projectData.arr[scope3.$index].mem)"
                        type="danger">删除</el-button>
                    </template>
                  </el-table-column> -->
                </el-table>
              </el-dialog>
              <el-button type="primary" @click="dialogmem1Visible = true">查看</el-button>
              <el-button type="Info">照片墙</el-button>
              <el-dialog title="人员管理" :visible.sync="dialogmem2Visible" center width="50vw">

                <el-table :data="projectData.arr[scope3.$index].mem" stripe
                  style="width: 30vw;margin: auto;overflow: hidden;" height="40vh" :key="Math.random()">
                  <el-table-column property="memName" label="人员名称" width="140"></el-table-column>
                  <el-table-column label="技能" width="140" type="primary">
                    <template slot-scope="scope6">
                      <el-tag v-for="skill in scope6.row.memSkill" :key="skill">
                        {{ skill }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="新增">
                    <template slot-scope="scope4">
                      <el-button @click.native.prevent="deleteRow(scope4.$index, projectData.arr[scope3.$index].mem)"
                        type="primary">新增</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>
              <!-- <el-button type="info" @click="dialogmem2Visible = true">新增</el-button> -->
            </template>
          </el-table-column>


        </el-table>
      </div>
      <div class="pagination">
        <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageIfo.page" :page-sizes="[5, 10, 15, 20]" :page-size="pageIfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="projectNum">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Status',
  data() {
    return {
      projectInput: '',
      projectData: {
        arr: [{
          projectName: 'reggie', risk: [{ riskName: '1', state: '待处理', category: '人员', principal: '小王', priority: 'A' }, { riskName: '1', state: '待处理', category: '人员', principal: '小王', priority: 'A' }, { riskName: '1', state: '待处理', category: '人员', principal: '小王', priority: 'A' }, { riskName: '1', state: '待处理', category: '人员', principal: '小王', priority: 'A' }, { riskName: '1', state: '待处理', category: '人员', principal: '小王', priority: 'A' }],
          mem: [{ memName: 'xiaowang', memSkill: ['js', 'ts'] }, { memName: 'xiaowang', memSkill: ['html', 'css'] }, { memName: 'xiaowang', memSkill: ['js', 'ts'] }, { memName: 'xiaowang', memSkill: ['js', 'ts'] }, { memName: 'xiaowang', memSkill: ['js', 'ts'] }, { memName: 'xiaowang', memSkill: ['js', 'ts'] }, { memName: 'xiaowang', memSkill: ['js', 'ts'] }]
        },]
      },
      pageIfo: { page: 1, pageSize: 10, name: '' },
      projectNum: 40,
      projectRisk: {
        riskName: '',
        state: '',
        category: '',
        principal: '',
        priority: ''
      },
      member: {
        memName: '',
        memSkill: []
      },
      dialogrisk1Visible: false,
      dialogrisk2Visible: false,
      dialogmem1Visible: false,
      dialogmem2Visible: false,
      options: [{
        value: '选项1',
        label: '人员'
      }, {
        value: '选项2',
        label: '开发过程'
      }, {
        value: '选项3',
        label: '环境'
      }, {
        value: '选项4',
        label: '后勤'
      }, {
        value: '选项5',
        label: '需求'
      }, {
        value: '选项6',
        label: '进度'
      },
      ],
      rules: {
        riskName: [{ required: true, message: '请输入风险名称', trigger: 'blur' }],
        state: [{ required: true, message: '请输入风险状态', trigger: 'blur' }],
        category: [{ required: true, message: '请选择风险种类', trigger: 'blur' }],
        principal: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
        priority: [{ required: true, message: '请输入优先级', trigger: 'blur' }],
      }
    }
  },
  components: {

  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      this.pageIfo.page = 1;
      this.pageIfo.pageSize = Number(val);
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIfo.page = Number(val);
      this.getList();
    },
    getList() {
      this.projectData.arr = [{ name: 'reggie', category: '外卖1', background: '送外卖', technology: 'js', status: '已交付' },
      { name: 'reggie', category: '外卖2', background: '送外卖', technology: 'js', status: '已交付' },
      { name: 'reggie', category: '外卖3', background: '送外卖', technology: 'js', status: '已交付' },
      { name: 'reggie', category: '外卖4', background: '送外卖', technology: 'js', status: '已交付' },
      { name: 'reggie', category: '外卖5', background: '送外卖', technology: 'js', status: '已交付' }]
    },
    pushRisk(val) {
      this.projectData.arr[val].risk.push(this.projectRisk);
    },
    clear(formName) {
      formName && this.$refs[formName].resetFields();
      this.projectRisk = {
        riskName: '',
        state: '',
        category: '',
        principal: '',
        priority: ''
      };
    }
  },
}
</script>

<style lang="scss">
.el-dialog {
  border-radius: 20px;
}
</style>

<style scoped>
.up-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.down-card {
  margin-top: 20px;
  width: 100%;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10vh;

}


.el-tag+.el-tag {
  margin-left: 10px;
}
</style>
